<%@ page language="java" import="java.util.*"%>
<%@ page session="true"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="t"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <%@include file="../../template/estilos.jsp"%>
        <%@include file="../../template/script.jsp" %>
        <script src="${pageContext.request.contextPath}/resources/assets/scripts/module/country.js" type="text/javascript" ></script>

        <title>Insert title here</title>

        <script>
            var FormSamples = function() {


                return {
                    //main function to initiate the module
                    init: function() {

                        // use select2 dropdown instead of chosen as select2 works fine with bootstrap on responsive layouts.
                        $('.select2_category').select2({
                            placeholder: "Select an option",
                            allowClear: true
                        });

                        $('.select2_sample1').select2({
                            placeholder: "Select a State",
                            allowClear: true
                        });

                        $(".select2_sample2").select2({
                            placeholder: "Type to select an option",
                            allowClear: true,
                            minimumInputLength: 1,
                            query: function(query) {
                                var data = {
                                    results: []
                                }, i, j, s;
                                for (i = 1; i < 5; i++) {
                                    s = "";
                                    for (j = 0; j < i; j++) {
                                        s = s + query.term;
                                    }
                                    data.results.push({
                                        id: query.term + i,
                                        text: s
                                    });
                                }
                                query.callback(data);
                            }
                        });

                        $(".select2_sample3").select2({
                            tags: ["red", "green", "blue", "yellow", "pink"]
                        });

                    }

                };

            }();
        </script>



    </head>

    <body class="page-header-fixed">
        <!--form action="#" name="listCountry" -->   
        <%@include file="../../template/header.jsp"%>
        <!--div class="page-container" -->
        <%@include file="../../template/sidebar.jsp"%>
        <div class="page-container"> 
            <div class="page-content">
                <form:form action="newsave"  id="form"  method="post"  class="form-horizontal">

                    <%@include file="../../template/header_module.jsp"%>

                    <div class="row-fluid">
                        <div class="span12">
                            <!-- BEGIN EXAMPLE TABLE PORTLET-->
                            <div class="container-fluid">
                                <div class="portlet box green">
                                    <div class="portlet-title">
                                        <div class="caption"><i class="icon-globe"></i>Managed Table</div>

                                    </div>
                                    <div class="portlet-body"> 

                                        <div class="control-group">
                                            <label class="control-label">Code</label>
                                            <div class="controls">
                                                <input type="text" name="code" id="code" class="span6 m-wrap"  />
                                                <span class="help-inline">Some hint here</span>
                                            </div>
                                        </div> 
                                        <div class="control-group">
                                            <label class="control-label">Long Code</label>
                                            <div class="controls">
                                                <input type="text" name="longCode" id="longCode" class="span6 m-wrap" />
                                                <span class="help-inline red">Some hint here</span> 
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Name</label>
                                            <div class="controls">
                                                <input type="text" name="name" id="name"   class="span6 m-wrap" />
                                                <span class="help-inline">Some hint here</span>
                                            </div>
                                        </div>
                                        	     <label class="control-label"  >Country : &nbsp;</label>
							     <div class="controls" >
								<select class="span12 select2_category" id="CboCountry" name="CboCountry" data-placeholder="Choose a Country" tabindex="1">
								 <option value=""></option>
								 <c:forEach var="val" items="${country}">
                                                                         <option value="${val.id}">${val.name.trim()}</option>
                                                                 </c:forEach> 
							       </select>
						            
						           </div>
                                        <div class="control-group"> 
                                            <div class="controls">
                                                <button class="btn blue" type="button" onclick="validateForm();"><i class="icon-ok"></i> Save</button>
                                                <button class="btn gray" type="button" onclick="clearInput();"><i class="icon-trash"></i> Clear</button>
                                                <button class="btn red" type="button"><i class="icon-remove"></i> Cancel</button>
                                            </div>
                                        </div> 

                                    </div> 
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
                <c:forEach var="system" items="${dataSystem}"> 
                    <input type="hidden" value="${system.id}" name="createdBy" id="createdBy" /> 
                    <input type="hidden" value="${system.id}" name="ownerId" id="ownerId" /> 

                </c:forEach> 
                <input type="text" value="<%=request.getParameter("module")%>" name="module" id="module"/>
            </form:form>
        </div>
    </div> 
    <%@include file="../../template/footer.jsp"%> 
       <script>
		jQuery(document).ready(function() {       
	 
                   FormSamples.init();

		});
	</script>
</body>
</html>

